<template>
	<view>
			<home ref="ishome" v-if="page===1"></home>
			<fenlei ref="isfenlei" v-if="page===2"></fenlei>
			<find ref="isfind" v-if="page===3"></find>
			<my ref="ismy" v-if="page===4"></my>
		
		
			<view class="cu-bar tabbar bg-black">
			<view :class="page=='1'?'action text-green':'action text-gray'" @click="changePage(1)">
				<view>
					<image :class="page=='1'?'icon':'hide'" src="/static/tabbar/a.png" mode="aspectFit"></image>
					<image :class="page=='1'?'hide':'icon'" src="/static/tabbar/aa.png" mode="aspectFit"></image>
				</view>
				首页
			</view>
			<view :class="page=='2'?'action text-green':'action text-gray'" @click="changePage(2)">
				<view>
					<image :class="page=='2'?'icon':'hide'" src="/static/tabbar/b.png" mode="aspectFit"></image>
					<image :class="page=='2'?'hide':'icon'" src="/static/tabbar/bb.png" mode="aspectFit"></image>
				</view>
				分类
			</view>
			<view class="action text-gray add-action" @click="gofabu">
				<button class="cu-btn cuIcon-add bg-green shadow"></button>
				发布
			</view>
			<view :class="page=='3'?'action text-green':'action text-gray'" @click="changePage(3)">
				<view>
					<image :class="page=='3'?'icon':'hide'" src="/static/tabbar/c.png" mode="aspectFit"></image>
					<image :class="page=='3'?'hide':'icon'" src="/static/tabbar/cc.png" mode="aspectFit"></image>
				</view>
				发现
			</view>
			<view :class="page=='4'?'action text-green':'action text-gray'" @click="changePage(4)">
				<view>
					<image :class="page=='4'?'icon':'hide'" src="/static/tabbar/d.png" mode="aspectFit"></image>
					<image :class="page=='4'?'hide':'icon'" src="/static/tabbar/dd.png" mode="aspectFit"></image>
				</view>
				我的
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import home from '../home/home.vue'
	import fenlei from '../fenlei/fenlei.vue'
	import find from '../find/find.vue'
	import my from '../my/my.vue'
	
	export default {
		components:{
			home,
			fenlei,
			find,
			my
		},
		data() {
			return {
				page:1//当前页
			}
		},
		methods: {
			changePage(parma){
				this.page = parma
			},
			gofabu(){
				uni.navigateTo({
				    url: '../fabu/fabu'
				});
			}
		}
	}
</script>

<style lang="less">
	.tabbar{
		width: 100%;
		position: fixed;
		bottom: 0;
        left: 0;
		box-shadow: 0 0 20upx #ddd;
		.icon{
			width:50upx;
			height:50upx;
		}
	}
	.hide{
		display: none;
	}
</style>
